<template>
    <div class="app-bottom">
        <div class="app-bottom-inner web-inner">
            <div class="app-bottom-logo">
                <a href="#/"> <img src="../../static/img/logo1.png" alt=""></a>
            </div>
            <div class="app-bottom-left">
                <div class="title">
                    各大加盟館
                </div>
                <div class="text">
                    <a v-if="index>0" :href="'#'+item.path" v-for="(item,index) in menu">{{item.title}}</a>
                </div>
            </div>
            <div class="app-bottom-left other">
                <div class="title">
                    開店+服務
                </div>
                <div class="box">
                    <div class="text">
                        <a href="#/kandeng">加盟品牌刊登</a>
                        <a href="#/jiameng">國內加盟需求</a>
                        <a href="#/jiameng">海外加盟需求</a>
                        <a href="#/coach">創業規劃輔導</a>
                        <!--<a>專業技能轉移</a>-->
                    </div>
                    <div class="text">
                        <a href="#/about">關於我們</a>
                        <a href="#/contact">聯繫我們</a>
                        <a href="#/proposal">合作提案</a>
                        <a href="#/service">服務條款</a>
                        <a href="#/privacy">隱私權政策</a>
                    </div>
                </div>

            </div>
        </div>
        <div class="right web-inner">
            <div>開店+版權所有© 2019 Taiwan All Rights Reserved.</div>
            <div class="line"><span>客戶專線：0983068735 </span><a href="http://nav.cx/hXKkUnJ"><img src="../../static/img/line1.png" alt=""></a></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "common-bottom",
        props:{
            menu:{
                type:Array
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
    a{
        color: #000000;
    }
    .app-bottom{
        width: 100%;
        background-color: #e6e6e6;
        padding:  72px 0;
        a{
            text-decoration: none;
            &:hover{
                color: gray;
            }
        }
        .app-bottom-inner{
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            .app-bottom-logo{
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                img{
                    width: 288px;
                }
            }
            .app-bottom-left{
                font-size: 18px;
                flex: 1;
                .title{
                    font-weight: bold;
                    margin-bottom:25px;
                }
                .box{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;

                }
                .text{
                    display: flex;
                    flex-direction: column;
                    line-height: 26px;
                }
            }
            .app-bottom.other{
                flex: 2;
            }
        }
        .right{
            margin: 10px auto 0;
            font-size: 16px;
            text-align: right;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            .line{
                display: flex;
                flex-direction: row;
                align-items:center;
                justify-content: flex-end;
                a{
                    vertical-align: middle;
                }
                img{
                    width: 100px;
                    vertical-align: middle;
                    margin-top: 10px;
                }
            }
        }
    }

</style>